import React, { useEffect, useState, Component } from 'react';
import { system_system } from '../../utils/api'
import '../../styles/Systemdata.scss'

//引入echarts图表库
import * as echarts from 'echarts'
import { type } from '@testing-library/user-event/dist/type';

interface Props {

}
function Systemdata(props: Props) {
    // 获取实时数据中x轴
    var [xaxis, setXaxis] = useState([]);
    // 获取数据
    var [seriesone, setSeriesone] = useState();
    var [seriestwo, setSeriestwo] = useState();

    useEffect(() => {
        system_system().then((res) => {
            console.log(res.data.list);
            setXaxis(res.data.list.xAxis);
            setSeriesone(res.data.list.series[0].data)
            setSeriestwo(res.data.list.series[1].data)
        })
    }, [])

    useEffect(() => {
        type EChartsOption = echarts.EChartsOption;
        var chartDom = document.getElementById('container')!;
        var myChart = echarts.init(chartDom);
        var option: EChartsOption = {
            // 标题
            title: {
                text: '在线服务数据趋势',
                left: 'center'

            },
            legend: {
                top: 30
            },
            tooltip: {//悬浮提示框（鼠标悬浮提示）
                // position: [10, 10]
            },
            label: { show: true },
            // x轴
            xAxis: {
                data: xaxis,
                boundaryGap: false,
            },
            yAxis: {
                type: 'value'
            },
            // 数据
            series: [
                {
                    name: '接待量',
                    type: 'line',
                    data: seriesone,
                }
                ,
                {
                    name: '处理量',
                    type: 'line',
                    data: seriestwo,

                }
            ]
        };
        option && myChart.setOption(option)
    })
    return (
        <div className='systemdata'>
            <p>实时数据</p>
            <div className="ctn">
                <div className="box">
                    <div className="header">
                        <p>正在咨询人数</p>
                        <span>0</span>
                    </div>
                    <div className="footer">
                        <p>当前在线客服数<span>0</span></p>
                    </div>
                </div>
                <div className="box">
                    <div className="header">
                        <p>正在排队人数</p>
                        <span>0</span>
                    </div>
                    <div className="footer">
                        <p>今日排队总数<span>0</span></p>
                    </div>
                </div>
                <div className="box">
                    <div className="header">
                        <p>今日会话量</p>
                        <span>0</span>
                    </div>
                    <div className="footer">
                        <p>今日平均响应时长<span>0</span></p>
                    </div>
                </div>
                <div className="box">
                    <div className="header">
                        <p>今日排队失败量</p>
                        <span>0</span>
                    </div>
                    <div className="footer">
                        <p>实际接入率<span>0%</span></p>
                    </div>
                </div>
                <div className="box">
                    <div className="header">
                        <p>今日相对满意率</p>
                        <span>0%</span>
                    </div>
                    <div className="footer">
                        <p>今日参评率<span>0%</span></p>
                    </div>
                </div>
            </div>
            <p>今日在线服务数据趋势</p>
            <div id="container" style={{ width: 1200, height: 350 }} ></div>
        </div>
    );
}

export default Systemdata;